<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
		<view v-if="hasRes">
			<view class='topic' v-if="lists.length > 0">
				<view class='topic-list clearfloat' v-for="(it, k) in lists" :key="k">
					<view class='col-10 avat'>
						<image :src="it.img" mode="widthFix" lazy-load="true" @error="imgError(k)" v-if="it.img"></image>
						<image src="../../static/avatars_default.png" mode="widthFix" lazy-load="true" v-else></image>
						<image src="../../static/4.png" mode="widthFix" lazy-load="true" class="vip"></image>
						<view class='info'>
							<text style='font-size:30upx;'>{{it.name}}</text>
							<view class='c'>{{it.create_time}}<text><block v-if="it.is_cang == 0">赞</block><block v-else>收藏</block>了您的信息</text></view>
						</view>
					</view>
					<view class='col-2 narrow' @click="goDetail(it.zx_id)">去看看</view>
				</view>
			</view>
		</view>
		<view class="nocont" v-else>暂无记录</view>
		<view class="nomore" v-if="isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view>
	</view>
</template>

<script>
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '赞和收藏',
				navH: null,
				userInfo: {},
				hasRes: true,
				isLoad: false,
				page: 1,
				size: 10,
				lists: [],
			}
		},
		onLoad() {
			this.navH = this.$store.state.navHeight;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getCang();
		},
		// 上划加载
		onReachBottom() {
			if(!this.isLoad) {
				this.page = this.page + 1;
				this.getCang();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.lists = [];
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getCang();
			uni.stopPullDownRefresh();
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: '爱美指南针',
				path: 'pages/index/index',
			}
		},
		methods: {
			/**
			 * @des 获取赞和收藏
			 */
			getCang() {
				app.request({
					url: 'entry/wxapp/CangList',
					data: {
						user_id: this.userInfo.id,
						page: 1,
						size: 10,
					}
				}, (ret) => {
					let d = ret.data, tmpData = this.lists, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.lists = tmpData.concat(d.data);
						this.isLoad = len < this.size ? true : false;
					} else {
						this.hasRes = false;
					}
				})
			},
			/**
			 * @des 打开资讯详情
			 */
			goDetail(id) {
				uni.navigateTo({
					url: '../detail/index?id='+ id
				})
			},
			/**
			 * @des 处理错误图片
			 */
			imgError(k) {
				let tmpLists = this.lists;
				tmpLists[k].icon = '../../static/avatars_default.png';
				this.lists = tmpLists;
			}
		}
	}
</script>

<style>
	/** 话题列表 */
	.label {display: block; width: 100%; padding: 20upx; border-bottom: 1px solid #ddd; font-size: 30upx; color: #666; background-color: #fff; text-align: left; vertical-align: middle;}
	.topic {margin-bottom: 20upx; text-align: left; background-color: #fff;}
	.topic .topic-list {padding: 20upx; border-bottom: 1px solid #eee; background-color: #fff; vertical-align: middle;}
	.topic .topic-list image {display: inline-block; width: 90upx; height: 90upx; border-radius: 100%; vertical-align: middle;}
	.topic .topic-list .avat {position: relative;}
	.topic .topic-list .avat .vip {position: absolute; bottom: 5upx; left: 13%; width: 28upx; z-index: 111;}
	
	.topic .topic-list .info {display: inline-block; vertical-align: middle; line-height: 1; margin-left: 30upx;}
	.topic .topic-list .info .c {padding-top: 15upx; font-size: 24upx; color: #666;}
	.topic .topic-list .info .c text {margin-left: 20upx; font-size: 24upx; color: #666;}
	.topic .topic-list .narrow {display: inline-block; padding: 10upx 0; border-radius: 48upx; text-align: center; font-size: 26upx; color: #fff; background-color: #82d7d0;}
	.topic .topic-list .narrow image {width: 22upx; height: 32upx;}
</style>
